import React, { FC, useState } from 'react';
import './index.less';
import { useRequest } from 'umi';
import * as API from '@/services';
import HxIcon from '@/components/HxIcon';
import { Button, Divider, Empty, Form, Space, Spin, Table, Typography } from 'antd';
import { getExtensionFromURL, KfModal } from 'kf-web-library';
import { Link } from '@@/exports';
import JournalTempDocForm from '@/pages/biz/Journal/components/JournalTempDocForm';

interface JournalTempDocProps {
  journalId?: API.EntityId;
  locale?: string;
}

const JournalTempDocList: FC<JournalTempDocProps> = (props) => {
  const { journalId, locale } = props;

  const [createOpen, setCreateOpen] = useState(false);
  const [modifyOpenId, setModifyOpenId] = useState<API.EntityId | undefined>(undefined);

  const recordsReq = useRequest(
    () =>
      API.queryJournalTemplates({
        journalId: journalId,
      }),
    {
      ready: !!journalId,
      refreshDeps: [journalId],
    },
  );
  const records = recordsReq.data || [];

  return (
    <div className={'journal-temp-doc-container'}>
      <div style={{ marginBottom: 12 }}>
        <Button
          type={'primary'}
          size={'small'}
          onClick={() => {
            setCreateOpen(true);
          }}
        >
          添加模版文档
        </Button>
      </div>
      <Table
        pagination={false}
        size={'small'}
        bordered={true}
        dataSource={records}
        columns={[
          {
            title: '文件名',
            dataIndex: 'name',
            render: (text, record) => {
              const { fileUrl, nameCn, nameEn } = record;
              let fileExt = getExtensionFromURL(fileUrl) || '';
              let fType = 'unknow';
              if (['.doc', '.docx'].includes(fileExt)) {
                fType = 'doc';
              } else if (['.xls', '.xlsx'].includes(fileExt)) {
                fType = 'xls';
              } else if (['.ppt', '.pptx'].includes(fileExt)) {
                fType = 'ppt';
              }
              return (
                <div>
                  <HxIcon type={`hxicon-file-${fType}`} style={{ marginRight: 12 }} />
                  <a href={fileUrl} target="_blank">
                    {(locale === 'cn' ? nameCn : nameEn) || 'File'}
                  </a>
                </div>
              );
            },
          },
          {
            title: '操作',
            width: 160,
            dataIndex: 'op',
            render: (_, record) => (
              <Space size={0} split={<Divider type="vertical" />}>
                <a
                  onClick={() => {
                    setModifyOpenId(record.id);
                  }}
                >
                  编辑
                </a>
                <a onClick={() => {}}>
                  <Typography.Text type="danger">删除</Typography.Text>
                </a>
              </Space>
            ),
          },
        ]}
      />

      {(modifyOpenId || createOpen) && (
        <KfModal
          title={`模版文档-${createOpen ? '创建' : '编辑'}`}
          open={true}
          destroyOnClose={true}
          onCancel={() => {
            setModifyOpenId(undefined);
            setCreateOpen(false);
          }}
          onSubmitted={() => {
            recordsReq.refresh();
          }}
          width={400}
        >
          <JournalTempDocForm bizId={modifyOpenId} journalId={journalId} formType={createOpen ? 'create' : 'modify'} />
        </KfModal>
      )}
    </div>
  );
};

export default JournalTempDocList;
